2023/12/233387字符

闭包

内部函数被保存到外部,生成闭包

  1. 闭包内一定有嵌套函数
  2. 内层函数一定操作了外层函数的局部变量
  3. 子函数有调用 或 外层函数将内层函数返回到外部,并且被全局变量保存住

缺陷:闭包会导致原有作用域链不释放,造成内存泄露(内存占用)

function a () {
    function b () {
        var bbb = 234;
        console.log(aaa);
    }
    var aaa = 123;
    return b;
}
var glob = 100;
var demo = a();
demo();  //--> 123
var demo;
function test () {
    var abc = 100;
    function a () {
        console.log(abc);
    }
    demo = a;
}
test();
demo();  //--> 100

函数累加器

function add () {
    var count = 0;
    return function () {
        return count ++;
    }
}
var counter = add();
counter();  //--> 1
counter();  //--> 2
counter();  //--> 3
counter();  //--> 4

闭包还可以这样玩儿

function test () {
    var num = 100;
    function a () {
        num ++;
        console.log(num);
    }
    function b () {
        num --;
        console.log(num);
    }
    return [a,b];
}
var myArr = test();
myArr[0]();  //--> 101
myArr[1]();  //--> 100

缓存

function eater () {
    var food = "";
    return {
        eat : function () {
            console.log("I am eating " + food);
        },
        push : function (myFood) {
            food = myFood;
        }
    }
}
var eater1 = eater();
eater1.push('banana');
eater1.eat();  //--> 'I am eating banana'

函数体不能被直接套现

function test () {
    var arr = [];
    for(var i = 0; i < 10; i ++){
        arr[i] = function(){  // 函数体不能被直接套现  函数的定义
            console.log(i);
        }
    }
    return arr;
}
var myArr = test();
for(var j = 0; j < 10; j ++){
    myArr[j]();  //--> 10 * 10  函数执行
}

通过立即执行函数解决问题

function test(){
    var arr = [];
    for(var i = 0; i < 10; i ++){
        (function (j) {
            arr[j] = function(){
                console.log(j);
            }
        }(i))
    }
    return arr;
}
var myArr = test();
for(var j = 0; j < 10; j ++){
    myArr[j]();  //--> 0123456789
}

事件点击

// <botton>1</botton><botton>2</botton><botton>3</botton><botton>4</botton>
function test () {
    var myBotton = document.getElementsByTagName('botton');
    for(var i = 0; i < myBotton.length; i ++){
        (function (j) {
            myBotton[j].onclick = function(){
                console.log(j);
            }
        }(i))
    }
}
test();

私有化变量

// 闭包
function Person () {
    // var this = {
    //     makeMoney : function(){}
    //     offer : function(){}
    // }
    var money = 100;
    this.name = name;
    this.makeMoney = function () {
        money ++;
    }
    this.offer = function () {
        money --;
    }
    // return this;
}
var person = new Person();

// 立即执行函数
var inherit = (function () {
    var F = function () {};
    return function (Target, Origin) {
        F.prototype = Origin.prototype;
        Target.prototype = new F();
    }
}())